﻿$(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
        let path = window.location.href
        let typeName = path.split('?')[1].split('=')[1] 
        let typeNumber=typeName
        if(typeName==0) {
            typeName='王者荣耀'
        }
        else if(typeName==1) {
            typeName='荒野行动'
        }
        else if(typeName==2) {
            typeName='英雄联盟'
        }
        var chart;                                                                  
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // don't animate in old IE               
                marginRight: 10,                                                    
                events: {                                                           
                    load: function() {                                              
                      
                        if(typeNumber==0) {
                          let date=new Date().getTime()
                          let dates=Math.random()*date;
                            let  webSocketKing = new WebSocket('ws://${onlyUrl}/gamingDataForKing?flag='+dates);
                             webSocketKing.onopen = function (e) {
                                webSocketKing.send(date);
                            }
                        webSocketKing.onmessage = function (event) {
                              let   m=event.data.split(":")[3].split('"')[1];
                                //  console.log(m)
                                 $('.online').text(m)
                                 $('.onlineNow').html(m)
                                 $('.game_name').text('王者荣耀联赛')
                                 $('.game_number').text(m);
                                 console.log(event)
                                     var x = (new Date()).getTime(), // current time         
                           y = m/10;                                  
                        series.addPoint([x, y], true, true); 
                               };
                        }
                       
                        if(typeNumber==1){
                        let date=new Date().getTime()
                            webSocketLol = new WebSocket('ws://${onlyUrl}/gamingDataForHero?flag='+date);
                            webSocketLol.onopen = function (e) {
                                webSocketLol.send(date);
                            }
                             websocket.onerror = function(evt) { 
                                onError(evt) 
                            }; 
                            webSocketLol.onmessage = function (event) {
                                let     m=event.data.split(":")[3].split('"')[1];
                                    //  console.log(m)
                                     $('.onlineLol').text(m)
                                     $('.onlineNowLol').html(m)
                                     $('.game_number').text(m)
                                 $('.game_name').text('荒野行动联赛')
                                 // console.log(event)
                                         var x = (new Date()).getTime(), // current time         
                               y = m/10;                                  
                            series.addPoint([x, y], true, true); 
                            websocket.close()
                                   };
                        }
                        
                       if(typeNumber==2){
                        let date=new Date().getTime()
                           
                        webSocketChiji = new WebSocket('ws://${onlyUrl}/gamingData?flag='+date);
                        webSocketChiji.onmessage = function (event) {
                             let    m=event.data.split(":")[3].split('"')[1];
                                //  console.log(m)
                                 $('.onlineChiji').text(m)
                                 $('.onlineNowChiji').html(m)
                                 $('.game_number').text(m)
                                 $('.game_name').text('英雄联盟联赛')
                                 // console.log(event)
                                     var x = (new Date()).getTime(), // current time         
                           y = m/10;                                  
                        series.addPoint([x, y], true, true); 
                        webSocketChiji.send(date)
                               };
                       }
                                                                 
                        // set up the updating of the chart each second             
                        var series = this.series[0];                                
                        // setInterval(function() {                                    
                        //     var x = (new Date()).getTime(), // current time         
                        //         y = Math.random();                                  
                        //     series.addPoint([x, y], true, true);                    
                        // }, 1000); 
                        
                        
                    }                                                               
                }                                                                   
            },                                                                      
            title: {                                                                
                text: typeName                                            
            },                                                                      
            xAxis: {                                                                
                type: 'datetime',                                                   
                tickPixelInterval: 150                                              
            },                                                                      
            yAxis: {                                                                
                title: {                                                            
                    text: '在线人数'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 0,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);                         
                }                                                                   
            },                                                                      
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: '在线人数',                                                
                data: (function() {                                                 
                    // generate an array of random data                             
                    var data = [],                                                  
                        time = (new Date()).getTime(),                              
                        i;                                                          
                                                                                    
                    for (i = -19; i <= 0; i++) {                                    
                        data.push({                                                 
                            x: time + i * 1000,                                     
                            y: 1312312*Math.ceil(Math.random()*5)
                        });                                                         
                    }                                                               
                    return data;                                                    
                })()                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});                                                                                 